<template>
	<div class="personal">
		<el-row>
			<el-col :xs="24" :sm="16">
				<el-card shadow="hover" header="个人信息">
					<div class="personal-user">
						<div class="personal-user-left">

							<img :src="userInfos.Avatar+'?t='+Math.random()" @click="onOpenUploadFace()" />

						</div>
						<div class="personal-user-right">
							<el-row>
								<el-col :span="24" class="personal-title mb18">
									🐱‍🐉{{ currentTime }}，{{userInfos.AccountName}}！
								</el-col>
								<!-- <el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">姓名：</div>
											<div class="personal-item-value">{{userInfos.Name}}</div>
										</el-col>
										<el-col :xs="24" :sm="16" class="personal-item mb6">
											<div class="personal-item-label">拥有角色：</div>
											<div class="personal-item-value">
												<span style="padding:6px 8px 6px 0px">
													{{userInfos['Roles']}}
												</span>
											</div>
										</el-col>
									</el-row>
								</el-col> -->
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录IP：</div>
											<div class="personal-item-value">{{userInfos.LastIp}}</div>
										</el-col>
										<el-col :xs="24" :sm="16" class="personal-item mb6">
											<div class="personal-item-label">登录时间：</div>
											<div class="personal-item-value">
												{{cf.dateFormatYMDHMS(null,null,userInfos.LoginTime*1000)}}
											</div>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录次数：</div>
											<div class="personal-item-value">{{userInfos.LoginCount}}</div>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 消息通知 -->
			<el-col :xs="24" :sm="8" class="pl15 personal-info">
				<el-card shadow="hover">
					<template #header>
						<span>消息通知</span>
						<span class="personal-info-more">更多</span>
					</template>
					<div class="personal-info-box">
						<ul class="personal-info-ul">
							<li v-for="(v, k) in newsInfoList" :key="k" class="personal-info-li">
								<a :href="v.link" target="_block" class="personal-info-li-title">{{ v.title }}</a>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>

			<!-- 营销推荐 -->
			<el-col :span="24">
				<el-card shadow="hover" class="mt15" header="营销推荐" v-if="1==2">
					<el-row :gutter="15" class="personal-recommend-row">
						<el-col :sm="6" v-for="(v, k) in recommendList" :key="k" class="personal-recommend-col">
							<div class="personal-recommend" :style="{ 'background-color': v.bg }">
								<SvgIcon :name="v.icon" :style="{ color: v.iconColor }" />
								<div class="personal-recommend-auto">
									<div>{{ v.title }}</div>
									<div class="personal-recommend-msg">{{ v.msg }}</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>

			<!-- 更新信息 -->
			<el-col :span="24">
				<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
					<el-row :gutter="36">
						<el-col :span="12">
							<div class="personal-edit-title">基本信息</div>
							<el-form :model="ruleForm" size="default" label-width="120px" ref="userForm">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="账户名" required
											:rules="[{ required: true, message: '请输入账户名'} ]" prop="AccountName">
											<el-input v-model="ruleForm.AccountName" placeholder="请输入账户名" clearable
												v-on:keyup.enter="onSubmit(userForm)"></el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="手机号">
											<el-input v-model="ruleForm.MobileTelephone" placeholder="请输入手机号" clearable
												v-on:keyup.enter="onSubmit(userForm)">
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="邮箱">
											<el-input v-model="ruleForm.Email" placeholder="请输入邮箱" clearable
												v-on:keyup.enter="onSubmit(userForm)"></el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="QQ">
											<el-input v-model="ruleForm.QQ" placeholder="请输入QQ" clearable
												v-on:keyup.enter="onSubmit(userForm)"></el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="微信">
											<el-input v-model="ruleForm.Wechat" placeholder="请输入微信" clearable
												v-on:keyup.enter="onSubmit(userForm)">
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item>
											<el-button type="primary" @click="onSubmit(userForm)">
												<el-icon>
													<Position />
												</el-icon>
												更新个人信息
											</el-button>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-col>
						<el-col :span="12">
							<div class="personal-edit-title mb15">账号安全</div>
							<el-form :model="ruleForm" size="default" label-width="120px" ref="passFormref">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="旧密码" required
											:rules="[{ required: true, message: '请输入旧密码'} ]" prop="OLDPassword">
											<el-input v-model="ruleForm.OLDPassword" placeholder="请输入旧密码"
												v-on:keyup.enter="onSubmitPass(passFormref)" type="password" clearable>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="新密码" required
											:rules="[{ required: true, message: '请输入新密码'} ]" prop="Password">
											<el-input v-model="ruleForm.Password" placeholder="请输入新密码" type="password"
												v-on:keyup.enter="onSubmitPass(passFormref)" clearable>
											</el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item label="确认密码" required
											:rules="[{ required: true, message: '请输入确认密码'},{validator: validatePass, trigger: 'blur'} ]"
											prop="ConfirmPassword">
											<el-input v-model="ruleForm.ConfirmPassword" placeholder="请输入确认密码"
												type="password" clearable v-on:keyup.enter="onSubmitPass(passFormref)">
											</el-input>
										</el-form-item>
									</el-col>

									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
										<el-form-item>
											<el-button type="primary" @click="onSubmitPass(passFormref)">
												<el-icon>
													<Position />
												</el-icon>
												修改密码
											</el-button>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-col>
					</el-row>
				</el-card>
			</el-col>

		</el-row>
		<UploadPicture ref="uploadFormRef" />
	</div>
</template>

<script lang="ts">
	import {
		toRefs,
		reactive,
		computed,
		ref,
	} from 'vue';
	import UploadPicture from '/@/components/cropper/UploadPicture.vue';
	import {
		Session
	} from '/@/utils/storage';
	import cF from '/@/utils/commonFunction';
	import {
		formatAxis
	} from '/@/utils/formatTime';
	import {
		newsInfoList,
		recommendList
	} from './mock';
	import {
		ElForm,
		ElMessage
	} from 'element-plus';
	import {
		changePasswordAPI,
		editInfoApI,
		uploadFaceAPI,
		refreshAPI
	} from '/@/api/usercenter/index';
	
	//} from '/@/router/frontEnd';
 import { useUserInfo } from '/@/stores/userInfo';
 import { storeToRefs } from 'pinia';
	import {
		deepClone
	} from '/@/utils/other';
	export default {
		name: 'me',

		components: {
			UploadPicture
		},
		setup() {
			type FormInstance = InstanceType < typeof ElForm > ;
			const userForm = ref < FormInstance > ();
		 
			const passFormref = ref < FormInstance > ();
			const uploadFormRef = ref();
           const stores = useUserInfo();
          const { userInfos } = storeToRefs(stores);
		  const PICURL =
		  	import.meta.env.VITE_PIC_URL as any
			const cf = new cF();
			const state = reactive({
				newsInfoList,
				recommendList,
				ruleForm: userInfos,
				userInfo:  userInfos
			});
			 
			// 当前时间提示语
			const currentTime = computed(() => {
				return formatAxis(new Date());
			});
			const onSubmitPass = (formEl: FormInstance | undefined) => {
				if (!formEl) return
				formEl.validate((valid) => {
					if (valid) {
                    const  params={
						OLDPassword:state.ruleForm.OLDPassword,
						Password:state.ruleForm.Password
					};
					console.log(params);
						changePasswordAPI(params).then(async (response) => {
							//console.log(response);
							if (response['code'] === 0) {

								ElMessage.success(`${response.message}`);

							}

						});
					} else {

						return false
					}
				})
			};
			const validatePass = (rule: any, value: any, callback: any) => {

				if (state.ruleForm.Password === value) {
					callback()

				} else {
					callback(new Error(`确认密码和密码不一致`))

				}

			}
			const onSubmit = (formEl: FormInstance | undefined) => {
				if (!formEl) return
				formEl.validate((valid) => {
					if (valid) {
						editInfoApI(state.ruleForm).then(async (response) => {
							if (response['code'] === 0) {
								ElMessage.success(`${response.message}`);
								// reloadData();
							}
						});
					} else {

						return false
					}
				})
			};
			const reloadData = (userInfo) => {
				//过期时间为0马上更新信息
				//Session.set('expiresIn', 0);
				///state.userInfo = userInfos
				userInfos.value=deepClone(userInfo);
				state.userInfo=deepClone(userInfo)
			}
			const onOpenUploadFace = () => {

				let params = new FormData();

				let options = {
					title: '更换头像',
					btnUpload: '更换',
					btnCancel: '取消',
					UploadAPI: uploadFaceAPI,
					callback: reloadData,
					cropperSize: {
						width: 400,
						height: 400,
					},
					params: params,
					cropperopt: {
						aspectRatio: 1 / 1,
						autoCropArea: .95,
						preview: '.img-preview',
					}
				}
				 
				uploadFormRef.value.openDialog('', options);

			};
			return {
				currentTime,
				...toRefs(state),
				cf,
				passFormref,
				onSubmitPass,
				validatePass,
				onSubmit,
				userForm,
				uploadFormRef,
				onOpenUploadFace,
		        userInfos,
				PICURL,
			};
		},
	};
</script>

<style scoped lang="scss">
	@import '../../theme/mixins/mixins.scss';

	.personal {
		.personal-user {
			height: 130px;
			display: flex;
			align-items: center;

			.personal-user-left {
				width: 130px;
				height: 130px;
				border-radius: 3px;

				::v-deep(.el-upload) {
					height: 100%;
				}

				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}

				&:hover {
					img {
						animation: logoAnimation 0.3s ease-in-out;
						cursor: pointer;
					}
				}
			}

			.personal-user-right {
				flex: 1;
				padding: 0 15px;

				.personal-title {
					font-size: 18px;
					@include text-ellipsis(1);
				}

				.personal-item {
					display: flex;
					align-items: center;
					font-size: 13px;

					.personal-item-label {
						color: var(--el-text-color-secondary);
						@include text-ellipsis(1);
					}

					.personal-item-value {
						@include text-ellipsis(1);
					}
				}
			}
		}

		.personal-info {
			.personal-info-more {
				float: right;
				color: var(--el-text-color-secondary);
				font-size: 13px;

				&:hover {
					color: var(--color-primary);
					cursor: pointer;
				}
			}

			.personal-info-box {
				height: 130px;
				overflow: hidden;

				.personal-info-ul {
					list-style: none;

					.personal-info-li {
						font-size: 13px;
						padding-bottom: 10px;

						.personal-info-li-title {
							display: inline-block;
							@include text-ellipsis(1);
							color: var(--el-text-color-secondary);
							text-decoration: none;
						}

						& a:hover {
							color: var(--color-primary);
							cursor: pointer;
						}
					}
				}
			}
		}

		.personal-recommend-row {
			.personal-recommend-col {
				.personal-recommend {
					position: relative;
					height: 100px;
					color: var(--color-whites);
					border-radius: 3px;
					overflow: hidden;
					cursor: pointer;

					&:hover {
						i {
							right: 0px !important;
							bottom: 0px !important;
							transition: all ease 0.3s;
						}
					}

					i {
						position: absolute;
						right: -10px;
						bottom: -10px;
						font-size: 70px;
						transform: rotate(-30deg);
						transition: all ease 0.3s;
					}

					.personal-recommend-auto {
						padding: 15px;
						position: absolute;
						left: 0;
						top: 5%;

						.personal-recommend-msg {
							font-size: 12px;
							margin-top: 10px;
						}
					}
				}
			}
		}

		.personal-edit {
			.personal-edit-title {
				position: relative;
				padding-left: 10px;
				color: var(--el-text-color-regular);

				&::after {
					content: '';
					width: 2px;
					height: 10px;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					background: var(--color-primary);
				}
			}

			.personal-edit-safe-box {
				border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
				padding: 15px 0;

				.personal-edit-safe-item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.personal-edit-safe-item-left {
						flex: 1;
						overflow: hidden;

						.personal-edit-safe-item-left-label {
							color: var(--el-text-color-regular);
							margin-bottom: 5px;
						}

						.personal-edit-safe-item-left-value {
							color: var(--el-text-color-secondary);
							@include text-ellipsis(1);
							margin-right: 15px;
						}
					}
				}

				&:last-of-type {
					padding-bottom: 0;
					border-bottom: none;
				}
			}
		}
	}
</style>
